<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common/taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">	
		<title>TzMarlon</title>
		<%@include file="../common/common.jsp" %>
		<style>
			#container{margin:0px auto;position: relative;}
			.items{position: absolute;box-shadow: 3px 2px 1em #ccc;background: #fff;border: 4px solid #fff;}
			.items:hover{box-shadow: 5px 3px 1em #141414;border: 4px solid #ccc;}
			.items p{padding:10px;width: 270px;font-size: 12px;background:#fff}
			#loader { width: 100%; height: 60px; background: url('${basePath}/resources/images/loader.gif') no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; }
		</style>
	</head>
	<body style="background:url(${basePath}/resources/images/bg2.jpg)">
		<!--头部-->
		<%@include file="../common/header.jsp" %>
		<!-- 内容区 -->
		<div class="wrapbox mt120">
			 <div class="w_left">
			 	<!-- 头部信息 -->
			 	<div class="cheader"></div>
			 	<!-- 内容区域 -->
			 	<!--div.items{$}*10-->
				<div id="container"></div>	
				<div id="loader"></div>
			</div>
		</div>
		<script>
			
			$(function(){
				/*
				 	 案例：瀑布流
				 	 1:高度是自动伸缩.宽度固定
				 	 2:定位布局，讲究就改变每一个元素的top和left位置即可。
				 	 3:间距的设定
				 */
				//容器对象
				var $container = $("#container");
				var $loader = $("#loader");
				
				//固定宽度
				var width = 290;
				//间距
				var space = 16;
				//真实距离
				var outerWidth = width +space;
				//求列数
				var cells = 0;
				
				//数据url===百度===JSON加密与解密
				var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';//这只是一个测试数据连接地址，最好做完肯定是改成你自己的连接地址
				var pageNo = 0;
				
				function getCells(){
					//求出列数
					cells = Math.floor(window.innerWidth /outerWidth);
					if(cells<2)cells = 2;
					if(cells>4)cells = 4;
					//将容器的宽度用真实的大小进行计算，就完整的宽度
					$container.width(cells * outerWidth-space);
				}
				
				getCells();
				
				//定义第一排的图片的位置
				var arrLeft = [];
				var arrTop = [];
				for(var i=0;i<cells;i++){
					arrTop.push(0);
					arrLeft.push(i*outerWidth);//固定不变的
				}
				
				var mark = true;
				function loadData(){
					if(mark){
						$loader.show();
						mark = false;
						$.getJSON(sUrl,{page:pageNo},function(data){
							data.forEach(function(obj,index){
								//计算出图片宽度缩小以后的比例，用户计算高度的缩放比例.
								var sbit = width/obj.width;
								var iheight = obj.height * sbit;
								//创建一个div
								var $div = $("<div/>");
								//获取到最小的位置,下一元素将放在位置最短的位置后面
								var minindex = getMinIndex(arrTop);
								//放一张图片
								$div.addClass("items").animate({
									left:arrLeft[minindex],
									top:arrTop[minindex]
								
								},"slow").html("<p><a href='javascript:void(0)' class='headpic' onclick=''></a><span>用户名</span><span>几天前</span></p><a href='"+obj.url+"' title='"+obj.title+"' target='_blank'><img src='"+obj.preview+"' width='"+width+"' height='"+iheight+"'/></a><p>'"+obj.title+"'</p><p class='info'><span>评论数<i class='iconfont icon-dianping'></i></span><span>点击数<i class='iconfont icon-hit'></i></span></p>");
								//添加到容器中
								$container.append($div);
								//累加的目的，是决定下一个元素的top的起点。
								arrTop[minindex] += $div.height() +space;
							});
							mark = true;
							$loader.hide();
						});
					}
				};
				
				loadData();
				
				//滚动加载数据
				$(window).on("scroll",function(){
					//获取滚动条的位置
					var sheight = $(window).scrollTop() + $(window).innerHeight();
					//最小距离
					var minindex = getMinIndex(arrTop) + $container.offset().top;//最小位置
					if(minindex < sheight && mark){
						pageNo++;
						loadData();
					}
				});
				
				//滚动加载数据
				$(window).on("resize",function(){
					var oldCells = cells;
					getCells();
					//原来的列和现在的列一样就返回不执行
					if(oldCells==cells)return;
					arrLeft=[];
					arrTop=[];
					for (var i=0;i<cells;i++) {
						arrTop.push(0);
						arrLeft.push(i*outerWidth)
					}
					
					//缩小的时候也要加载数据
					var maxHeight = $(window).scrollTop()+$(window).innerHeight();
					var minIndex  = getMinIndex(arrTop);
					if(arrTop[minIndex]+$container.offset().top < maxHeight){
						pageNo++;
						loadData();
					}
					
					//获取现有的元素进行交换位置
					var $items =  $container.find(".items");
					$items.each(function(){
						var minindex = getMinIndex(arrTop);
						//设定位置
						$(this).stop(true,true).animate({
							left:arrLeft[minindex],
							top:arrTop[minindex]
						},"slow");
						//替换数组中的高度
						arrTop[minindex] += $(this).height()+space;
					});
				
				});
			});
			
			/*找到数组最小元素坐在的位置和元素*/
			function getMinIndex(arr){
				var value = arr[0];
				var index = 0;
				for (var i=1;i<arr.length;i++) {
					if(arr[i] < value){
						value = arr[i];
						index = i;
					}
				}
				return index;
			};
			
		</script>
	</body>
</html>
			 	